<template>
	<div class='container'>
		<nav-header ></nav-header>
		<div v-if="shoppingList != null">
			<cart-item @addAllMoney="addAllMoney" v-for="(item,index) in shoppingList" :key="index" :cartItem="item"></cart-item>
			<!--底部  -->
			<div class='placehold-footer'>
				<div style='height: 55px;'></div>
				<div class='iPhoneXBar'></div>
			</div>
			<div class='foot-container'>
				<div class='foot-content'>
					<div class='all-select-container' @click="selectAllGoods">
						<div class='checkbox'>
							<span class="icon icon-check" v-if="is_all_select"></span>
						</div>
						<span class='all-select-span'>全选</span>
					</div>
					<div class='placeholder'></div>
					<div class='total-money'>合计{{allMoney}}元</div>
					<span class='pay-btn' @click="goToPay">立即付款</span>
				</div>
				<div class='iPhoneXBar'></div>
			</div>
		</div>
		<div v-else class='goods'>
			<no-goods-tpl></no-goods-tpl>
		</div>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import noGoodsTpl from "@/components/no-goods-tpl"
	import cartItem from "@/pages/shopping-cart/components/cart-item"
	import { mapGetters, mapState, mapActions } from 'vuex';

	export default {
		data() {
			return {
				hasGoods: true,
				paramas: {
					ifcart: 1,
					member_id: 101076,
					cart_info: ""
				},
				allMoney: 0,
				is_all_select: false
			}
		},
		computed: {
			...mapState(['shoppingList'])
		},
		mounted() {

		},
		created() {
			this.getShoppingList({
				memberId: 101076
			})
		},
		methods: {
			...mapActions(['getShoppingList', 'getSelectGoods']),
			addAllMoney(val){
				this.allMoney += val;
			},
			selectAllGoods() {
				// 全选
				this.is_all_select = !this.is_all_select
				for(var i = 0; i < this.shoppingList.length; i++) {
					// 所有的商品都选中
					this.shoppingList[i].is_select = this.is_all_select;
					if(this.is_all_select == true){
						// 计算价格
						this.allMoney += this.shoppingList[i].goods_price *  this.shoppingList[i].goods_num;
					}else{
						// 取消全选，价格为0
						this.allMoney = 0;
					}
				}
//				console.log(this)
			},
			goToPay() {
				// 防止之前的数据未删除
				this.paramas.cart_info = ""
				for(var i = 0; i < this.shoppingList.length; i++) {
					if(this.shoppingList[i].is_select){
						// 选中的商品
						this.paramas.cart_info += this.shoppingList[i].cart_id + ","
					}
				}
				console.log(this.paramas)
				this.paramas.cart_info = this.paramas.cart_info.substr(0, this.paramas.cart_info.length - 1);
				this.getSelectGoods(this.paramas)
				this.$router.push("/comfirmOrderDetail")
			}
		},
		components: {
			"nav-header": header,
			"no-goods-tpl": noGoodsTpl,
			"cart-item": cartItem
		},
		watch:{
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 90px 0 0;
		.foot-container {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24px 40px 14px;
			background: #fff;
			box-shadow: -6px -6px 20px 0 rgba(69, 69, 83, 0.05);
			.foot-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.all-select-container {
					flex-shrink: 0;
					display: flex;
					width: 130px;
					.checkbox {
						position: relative;
						flex-shrink: 0;
						width: 40px;
						height: 40px;
						margin-right: 20px;
						box-shadow: 1px 0 #979797 inset, 0 1px #979797 inset, 0 -1px #979797 inset, -1px 0 #979797 inset;
						border-radius: 50%;
						.icon-check {
							position: absolute;
							left: 0;
							top: 0;
							background-image: url(http://47.98.119.130/test/yami/selectred2.svg);
							display: inline-block;
							width: 40px;
							height: 40px;
							background-size: 100% 100%;
						}
					}
					.all-select-span {
						font-size: 32px;
						color: #67666b;
					}
				}
				.total-money {
					font-size: 28px;
					color: #ef364e;
					margin-right: 30px;
				}
				.pay-btn {
					width: 234px;
					height: 74px;
					background: linear-gradient(-180deg, #f64565 0%, #ef364e 100%);
					box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
					border-radius: 8px;
					line-height: 74px;
					text-align: center;
					color: #fff;
					font-size: 28px;
				}
			}
		}
	}
</style>